/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */
/*
 * @作者: kerwin
 * @公众号: 大前端私房菜
 */

import React, { Component } from 'react'

export default class App extends Component {
    a = 100
    myref = React.createRef()

    state = {
        list:[{
            id:1,
            mytext:"aaa"
        },
        {
            id:2,
            mytext:"bbb"
        },
        {
            id:3,
            mytext:"ccc"
        }]
    }

    render() {
        
        return (
            <div>
                {/* <input ref="mytext"/> */}
                <input ref={this.myref}/>

                <button onClick={this.handleClick2}>add2</button>

                <ul>
                    {
                        this.state.list.map(item=>
                        <li key={item.id}>{item.mytext}</li>    
                        )
                    }
                </ul>
            </div>
        )
    }

    handleClick2 = ()=>{
        console.log("click2",this.myref.current.value)

        // this.setState

        // 不要直接修改状态， 可能会造成不可预期的问题。
        // this.state.list.push(this.myref.current.value)

        let newlist = [...this.state.list]
        newlist.push({
            id:Math.random()*100000000, //生成不同id的函数
            mytext:this.myref.current.value
        })
        // console.log()
        this.setState({
            list:newlist
        })
    }

}
